<template>
<div class="mainGraph">
  <div class="leftMenu">
    <el-tree :data="listdata" :props="defaultProps" node-key="id" @node-click="handleNodeClick"></el-tree>
<!--    :hide-on-single-page="false"-->
    <div style="margin-top: 195%">
      <el-pagination
        style=""
        :small="true"
        :page-size="navdata.pageSize"
        :pager-count="5"
        @current-change="handleCurrentChange"
        background
        :current-page="navdata.pageCurrent"
        layout="prev, pager, next"
        :total="itemtotal">
      </el-pagination>
    </div>
  </div>
  <div class="right">
    <div class="element1">
      <div style="width: 600px;height: 30px;margin-top:0;margin-right:5%;display: flex;flex-direction: row; justify-content: center">
        <div style="color:white;font-size:10pt;margin-top: 5px">健康评分</div>
        <div style="color:white;line-height:23px;width:120px;height:25px;border-style:solid;border-color:#243c78;margin:0 20px 0 20px ;">{{this.scorebefore}}</div>
        <div style="width:120px;height:25px;background-color:rgb(13,62,102);color:#FFFFFF;font-size:10pt;padding-top: 5px">检修前已知缺陷</div>
        <!-- <el-tag>标签一</el-tag> -->
      </div>
      <div class="analysisTask">
        <el-table
          :data=effecttabledatabefore
          max-height="400px"
          style="width:100%;"
        >
          <el-table-column
            label="序号"
            prop="col1"
            align="center"
            min-width="30%"
          />
          <el-table-column
            label="已知缺陷"
            prop="col2"
            align="center"

          />
          <el-table-column
            label="检修处理方式"
            prop="col3"
            align="center"

          />
          <el-table-column
            label="是否解决"
            prop="col4"
            align="center"

          />
          <el-table-column
            label="后续措施"
            prop="col5"
            align="center"

          />
        </el-table>
   </div>
    </div>
      <div class="element1">
      <div style="width: 600px;height: 30px;margin-top:0;margin-right:5%;display: flex;flex-direction: row; justify-content: center;">
        <div style="color:white;font-size:10pt;margin-top: 5px">健康评分</div>
        <div style="color:white;line-height:23px;width:120px;height:25px;border-style:solid;border-color:#243c78;margin:0 20px 0 20px ;">{{this.scoreafter}}</div>
        <div style="width:120px;height:25px;background-color:rgb(13,62,102);color:#FFFFFF;font-size:10pt;padding-top: 5px">检修后新增缺陷</div>
        <!-- <el-tag>标签一</el-tag> -->
      </div>
      <div class="analysisTask">
        <el-table
          :data=effecttabledataafter
          max-height="400px"
          style="width: 100%;"
          :show-header=true
        >
          <el-table-column
            label="序号"
            prop="col1"
            align="center"
            min-width="30%"
          />
          <el-table-column
            label="新增缺陷"
            prop="col2"
            align="center"

          />
          <el-table-column
            label="检修处理方式"
            prop="col3"
            align="center"

          />
          <el-table-column
            label="是否解决"
            prop="col4"
            align="center"

          />
          <el-table-column
            label="后续措施"
            prop="col5"
            align="center"

          />
        </el-table>
   </div>
    </div>
    </div>
</div>


</template>

<script>
import ChartLine from '@/components/Echart/chartLinteffect.vue';
import { getreportList,getreportContent} from '@/api/maintenance'
export default {
  name: "Effecteva",
  components: {
       ChartLine
    },
  data() {
      return {
        labelparams:'',
        effecttabledatabefore:[],
        effecttabledataafter:[],
        navdata:{
          pageCurrent:1,
          pageSize:10,
        },
        listid:10,
        tabledata:[],
        scorebefore:'',
        scoreafter:'',
        postdata:[{
          "list": [{
            "col2": "50",
            "col1": "前"
          }, {
            "col2": "80",
            "col1": "后"
          }
          ],
          "label1": "检修",
          "label2": "健康评分"
        }, {
      "label4": "是否解决",
        "label5": "后续措施",
        "list": [{
          "col4": "是",
          "col5": "无",
          "col2": "极1高VCE-A相Y阀L1模块6号晶闸管回路TCE触发功能异常",
          "col3": "更换极1高VCE-A相Y阀L1模块6号晶闸管回路TCE",
          "col1": "1"
        },{
          "col4": "是",
          "col5": "无",
          "col2": "极1高VCE-A相Y阀L1模块6号晶闸管回路TCE触发功能异常",
          "col3": "更换极1高VCE-A相Y阀L1模块6号晶闸管回路TCE",
          "col1": "1"
        },{
          "col4": "是",
          "col5": "无",
          "col2": "极1高VCE-A相Y阀L1模块6号晶闸管回路TCE触发功能异常",
          "col3": "更换极1高VCE-A相Y阀L1模块6号晶闸管回路TCE",
          "col1": "1"
        },{
          "col4": "是",
          "col5": "无",
          "col2": "极1高VCE-A相Y阀L1模块6号晶闸管回路TCE触发功能异常",
          "col3": "更换极1高VCE-A相Y阀L1模块6号晶闸管回路TCE",
          "col1": "1"
        },{
          "col4": "是",
          "col5": "无",
          "col2": "极1高VCE-A相Y阀L1模块6号晶闸管回路TCE触发功能异常",
          "col3": "更换极1高VCE-A相Y阀L1模块6号晶闸管回路TCE",
          "col1": "1"
        },{
        "col4": "是",
        "col5": "无",
        "col2": "极1高VCE-C相Y阀L4模块9号晶闸管回路TCE触发功能异常",
        "col3": "更换极1高VCE-C相Y阀L4模块9号晶闸管回路TCE",
        "col1": "2"
      }, {
        "col4": "是",
        "col5": "无",
        "col2": "极1低VCE-A相D阀L3模块1号晶闸管级均压回路元件故障",
        "col3": "更换极1低VCE-A相D阀L3模块1号晶闸管级均压回路元件",
        "col1": "3"
      }
      ],
        "label1": "序号",
        "label2": "已知缺陷",
        "label3": "检修处理方式"
    }, {
      "label4": "是否解决",
        "label5": "后续措施",
        "list": [{
        "col4": "是",
        "col5": "无",
        "col2": "极1高VCE-A相D阀阀组件MSC至晶闸管级TCE的触发光纤回路异常",
        "col3": "更换极1高VCE-A相D阀清理阀组件MSC至晶闸管级TCE的触发光纤",
        "col1": "1"
      }, {
        "col4": "是",
        "col5": "无",
        "col2": "极1低VCE-C相Y阀阀组件MSC至晶闸管级TCE的触发光纤回路异常",
        "col3": "清理极1低VCE-C相Y阀阀组件MSC至晶闸管级TCE的触发光纤",
        "col1": "2"
      }, {
        "col4": "否",
        "col5": "返厂分析",
        "col2": "极1高VCE-C相D阀L8模块1号晶闸管级均压回路元件故障",
        "col3": "暂不处理",
        "col1": "3"
      }
      ],
        "label1": "序号",
        "label2": "新增缺陷",
        "label3": "检修处理方式"
    }
  ],
        effecttabledatabefore1:[
          {
            num:'1',
            flaw:'极1高VCE-A相Y阀L1模块6号晶闸管回路TCE触发功能异常',
            processmode:'更换极1高VCE-A相Y阀L1模块6号晶闸管回路TCE',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'2',
            flaw:'极1高VCE-A相Y阀L4模块9号晶闸管回路TCE触发功能异常',
            processmode:'更换极1高VCE-A相Y阀L4模块9号晶闸管回路TCE',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'3',
            flaw:'极1低VCE-A相D阀L3模块1号晶闸管级均压回路元件故障',
            processmode:'更换极1低VCE-A相D阀L3模块1号晶闸管级均压回路元件',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'4',
            flaw:'极1高VCE-A相Y阀L1模块6号晶闸管回路TCE触发功能异常',
            processmode:'更换极1高VCE-A相Y阀L1模块6号晶闸管回路TCE',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'5',
            flaw:'极1高VCE-A相Y阀L4模块9号晶闸管回路TCE触发功能异常',
            processmode:'更换极1高VCE-A相Y阀L4模块9号晶闸管回路TCE',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'6',
            flaw:'极1低VCE-A相D阀L3模块1号晶闸管级均压回路元件故障',
            processmode:'更换极1低VCE-A相D阀L3模块1号晶闸管级均压回路元件',
            issolve:'是',
            followmethod:'无',
          },
        ],
        effecttabledataafter2:[
          {
            num:'1',
            flaw:'极1高VCE-A相D阀组件MSC至晶闸管级TCE的触发光纤回路异常',
            processmode:'更换极1高VCE-A相D阀组件MSC至晶闸管级TCE的触发光纤',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'2',
            flaw:'极1低VCE-C相Y阀阀组件MSC至晶闸管级TCE的触发光纤回路异常',
            processmode:'更换极1低VCE-C相Y阀阀组件MSC至晶闸管级TCE的触发光纤',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'3',
            flaw:'极1高VCE-C相D阀L8模块1号晶闸管级均压回路元件故障',
            processmode:'暂不处理',
            issolve:'否',
            followmethod:'返厂分析',
          },
          {
            num:'4',
            flaw:'极1高VCE-A相Y阀L1模块6号晶闸管回路TCE触发功能异常',
            processmode:'更换极1高VCE-A相Y阀L1模块6号晶闸管回路TCE',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'5',
            flaw:'极1高VCE-A相Y阀L4模块9号晶闸管回路TCE触发功能异常',
            processmode:'更换极1高VCE-A相Y阀L4模块9号晶闸管回路TCE',
            issolve:'是',
            followmethod:'无',
          },
          {
            num:'6',
            flaw:'极1低VCE-A相D阀L3模块1号晶闸管级均压回路元件故障',
            processmode:'更换极1低VCE-A相D阀L3模块1号晶闸管级均压回路元件',
            issolve:'是',
            followmethod:'无',
          },
        ],
        listdatatranslate:[],
        itemtotal:0,
        listdata: [
          {
            reportlabel: '',
          },
          {
            reportlabel: '',
          },
          {
            reportlabel: '',
          },
          {
            reportlabel: '2018年检修评价报告',
          },
          {
            reportlabel: '2019年检修评价报告',
          },
          {
            reportlabel: '2020年检修评价报告',
          },
          {
            reportlabel: '2021年检修评价报告',
          },
          {
            reportlabel: '2022年检修评价报告',
        },{
            reportlabel: '2022年检修评价报告',
          },{
            reportlabel: '2022年检修评价报告',
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
   },
  created(){
    /*this.geteffecttable()*/
    this.getnavigationdata()
  },
  watch:{
    'this.data.$treeNodeId': {
      handler(new_value, old_value) {
        console.log('节点选择发生变化');
      }
    }
  },
    methods: {
      handleNodeClick(data) {
        console.log(data);
        this.labelparams=data.name;
        /*console.log('labelparams',this.labelparams);
        for(const idcount in this.listdatatranslate){
          if(this.labelparams==this.listdatatranslate[idcount].name){
            this.listid=this.listdatatranslate[idcount].id
          }
        }*/
        this.listid=data.id
        this.geteffecttable()
      },

      handleCurrentChange(current){
        this.navdata.pageCurrent=current
        console.log('页码',this.navdata.pageCurrent)
        this.getnavigationdata()
      },



      getnavigationdata(){
        getreportList(this.navdata).then(response => {
          console.log('getreportList', response)
          this.listdatatranslate = response.data.records
          this.itemtotal=response.data.total
          this.listdata=[]
          this.listdata=this.listdatatranslate
        })

      },

      geteffecttable(){
        getreportContent(this.listid).then(response => {
          this.tabledata=[]
          this.tabledata=response.data
          this.scorebefore=''
          this.scoreafter=''
          this.effecttabledatabefore=[]
          this.effecttabledataafter=[]
          for(const Contentcount in response.data){
            if(this.tabledata[Contentcount].label2=='健康评分'){
              this.scorebefore=this.tabledata[Contentcount].list[0].col2
              this.scoreafter=this.tabledata[Contentcount].list[1].col2
            }
            else if(this.tabledata[Contentcount].label2=='已知缺陷'){
              this.effecttabledatabefore=this.tabledata[Contentcount].list
            }
            else if(this.tabledata[Contentcount].label2=='新增缺陷'){
              this.effecttabledataafter=this.tabledata[Contentcount].list
            }
          }
       /*   this.scorebefore=this.tabledata[0].list[0].col2
          this.scoreafter=this.tabledata[0].list[1].col2
          this.effecttabledatabefore=this.tabledata[1].list
          this.effecttabledataafter=this.tabledata[2].list
          console.log('getreportContent', this.tabledata)
          console.log('id号',this.listid)*/
        })
      }

    }
}
</script>

<style lang="scss" scoped>
.mainGraph{
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    // background-color: red;

}
.right{
    width: 86%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.analysisTask{
  width: 95%;
  height: 70%;
  margin-top: 1%;
}
.leftMenu{
  display: flex;
  flex-direction:column;
  align-content: flex-end;
  width:12%;
  height:98%;
  background-color: #062339;
}
.element1{
    width: 50%;
    height: 100%;
    background-color: #062339;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}
.el-tree{
  margin-top: 10%;
  margin-left: 10px;
  width: 80%;
  background-color: transparent;

}
.el-tag{
  height: 20px;
  width: 60px;
}
>>>.el-tree-node__content{
  background-color: transparent;
  color: white;
}
>>>.el-tree-node.is-current > .el-tree-node__content {
    background-color: rgb(15,117,189) ;
  }
>>>.el-tree-node__content:hover {
  background-color:transparent;
}
>>>.el-tree-node__content{
  height: 40px;
}
>>>.el-tree .el-icon svg{   //原有的箭头 去掉
  display: none !important;
  height: 0;
  width: 0;
}

/*调整表头格式*/
::v-deep.el-table th{
  background-color: rgb(16,70,98);
  color: rgb(6,203,255);
  border-right: 1px solid #062339;
  border-bottom: 0;
}

/*调整表格格式*/
::v-deep.el-table td {
  background-color: rgb(7, 45, 69);
  color: #FFFFFF;
  border-right: 1px solid #062339;
  border-bottom: 1px solid #062339;
  border-left: 1px solid #062339;
}

/*设置表格悬停变色*/
::v-deep .el-table tbody tr:hover>td {
  background-color:#062339 !important;
}

/*消除表格底部白边*/
.el-table::before {
  height: 0;
  background-color: transparent;
}

/*修改表格滚动条格式*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: rgb(7,45,69);
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  opacity: 0.5;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: rgb(16,70,98);
}

/*修改滚动条白边*/
::v-deep .el-table--scrollable-y .el-table__body-wrapper{
  background-color: #062339;
}

/*修改因添加滑动条表头多出的列*/
::v-deep .el-table th.gutter{
  background-color: #062339;
}

::v-deep .el-table__empty-block{
  background-color:#062339;
}
</style>
